<!DOCTYPE html>
<html lang="es">
<head>

<!-- Title -->
<title>Ezequiel Zacca - Desarrollo Web</title>

<!-- Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Cache-control" content="public">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Moje. - Responsive One-Page Bootstrap vCard Template.">
<meta name="keywords" content="moje, responsive, one page, resume, bootstrap, vCard, personal page, html5, css3, retina">
<meta name="author" content="Suelo">

<link rel="shortcut icon" href="{{ asset('template/images/favicon.png') }}">
<link rel="apple-touch-icon" href="{{ asset('template/images/apple-touch-icon.png') }}">
<link rel="apple-touch-icon" sizes="72x72" href="{{ asset('template/images/apple-touch-icon-72x72.png') }}">
<link rel="apple-touch-icon" sizes="114x114" href="{{ asset('template/images/apple-touch-icon-114x114.png') }}">

<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!-- Retina Images -->
<script>if((window.devicePixelRatio===undefined?1:window.devicePixelRatio)>1)
    document.cookie='HTTP_IS_RETINA=1;path=/';</script>
<!-- End Retina Images -->

<!-- Google Web Fonts -->
<link href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,600,700,500' rel='stylesheet' type='text/css'>

<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="{{ asset('template/css/bootstrap.min.css') }}" />
<link rel="stylesheet" type="text/css" href="{{ asset('template/css/animations.css') }}" />
<link rel="stylesheet" type="text/css" href="{{ asset('template/css/font-awesome.min.css') }}" />
<link rel="stylesheet" type="text/css" href="{{ asset('template/css/flaticon.css') }}" />
<link rel="stylesheet" type="text/css" href="{{ asset('template/css/owl.carousel.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('template/css/owl.theme.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('template/css/style.min.css') }}" />
<link rel="stylesheet" type="text/css" href="{{ asset('template/colors/blue.css') }}" id="colors" />

</head>

<body>

<!-- Facebook Source -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<!-- Loader -->
<div id="page-loader">	</div>
<!-- Loader / End -->

<!-- Header  -->
<header id="nav-content" class="vertical-nav nav-white">

	<!-- Logo -->
	<div class="my-logo">

    	<a href="#profile"><img src="{{ asset('template/images/mi-foto2.jpg') }}" alt="" /></a>

    </div>
    
    <!-- Navigation -->
    <ul class="menu nav me-nav">
    	<li class="menu-item active"><a href="#profile"><span>Mi Perfil</span><i class="fa fa-user"></i></a></li>
        <li class="menu-item"><a href="#resume"><span>Acerca de Mi</span><i class="fa fa-pencil"></i></a></li>
        <li class="menu-item"><a href="#portfolio"><span>Proyectos</span><i class="fa fa-desktop"></i></a></li>
        <!--<li class="menu-item"><a href="#blog"><span>Ultimos Posts</span><i class="fa fa-comment"></i></a></li>-->
        <li class="menu-item"><a href="#contact"><span>Contacto</span><i class="fa fa-phone"></i></a></li>
        
    </ul>
    
    <!-- Copyright -->
    <span class="copyright hidden-md">© 2014 <b>Ezequiel Zacca</b>.</span>

</header>
<!-- Header / End -->

<!-- Page Content -->
<div id="page-content">

	<!-- Profile -->
	<section id="profile" class="black">
        <!-- Background photo -->
    	<div id="profile-bg" class="editable-alpha" data-alpha="40"><img src="{{ asset('template/images/backgrounds/maxresdefault.jpg') }}" alt="" /></div>
    
    	<!-- Video Background Player -->
    	<div id="profile-bg-player" class="player" data-property="{videoURL:'http://youtu.be/SdOGI1CEiOA',containment:'#profile',startAt:1,stopAt:200,mute:true,autoPlay:true,loop:true,showControls:false,opacity:1}"></div>
    	<div class="content padded dark">
        
        	<!-- Top Bar -->
        	<div class="top-bar">
            
            	<!-- Social media -->
            	<div class="pull-left">
                	<span class="hiddend-sm hidden-xs">Social Media</span>
                    <ul class="social-icons si-pull-up">
                        <li><a href="https://www.facebook.com/ezequiel.zacca.w" target="_blank"><i class="fa fa-facebook"></i></a></li>
                        <li><a href="https://www.linkedin.com/pub/matias-ezequiel-zacca-romano/64/27a/3a5" target="_blank"><i class="fa fa-linkedin"></i></a></li>
                        <li><a href="https://plus.google.com/+EzequielZacca" target="_blank"><i class="fa fa-google-plus"></i></a></li>
                    </ul>
                </div>
                
                <!-- URL -->
                <div class="pull-right">
                	<a href="http://www.symfonica.com.ar" target="_blank" class="hidden-xs">www.symfonica.com.ar</a>
                </div>
                
            </div>
        
			<!-- Profile Content -->
            <div class="profile-content">
            	<h1 class="short">Ezequiel Zacca</h1>
                <h5>Soy un Diseñador y Desarrollador WEB <span class="text-primary">Profesional</span>.</h5>
                <a href="#contact" class="btn btn-primary">Contactar!</a> <a href="#portfolio" class="btn btn-default">Ver Proyectos</a>
            </div>
            
            <!-- Bottom Bar -->
            <div class="bottom-bar profile-bottom-bar hidden-xs">
            
            	<!-- Contact List -->
                <ul class="list-inline">
                  <li><i class="inline-icon icon-before-and-after text-primary fa fa-map-marker"></i>12 de Octubre 546, Departamento 13 - Salta Argentina (CP 4400)</li>
                  <li><i class="inline-icon icon-before-and-after text-primary fa fa-comment"></i><a href="mailto:contacto@ezequielzacca.com.ar">contacto@ezequielzacca.com.ar</a></li>
                  <li><i class="inline-icon icon-before-and-after text-primary fa fa-phone"></i>+54(387)5 339353</li>
                </ul>
             
            </div>
                    
        </div>    	
        
    </section>
    <!-- Profile / End -->
    
    <!-- Resume -->
	<section id="resume">
    
    	<div class="content dimmed-effect padded-short">
        	
            <div class="row">
            
              <div class="col-lg-4">
              
              	<!-- Box - About Me -->
                <div class="resume-box animated slide-in-top">
                  <i class="title-icon text-blue flaticon-speech43"></i>
                  <h3>¿Quien soy?</h3>
                  <p class="lead">Soy un joven Salteño, que se especializa en el desarrollo de soluciones basadas en <span class="label label-primiary">Tecnologia Web</span> para empresas y particulares. </p>
                  <p>Me apasiona la utilizacion de Aplicaciones Web Integrales para dar soporte a las funciones de negocio requeridos por mis clientes. </p>
                  <p>Con mas de cinco años como Desarrollador y Diseñador Web, en constante capacitacion, innovacion y mejora de mis habilidades personales, con el unico fin de desarrollarme de manera excelente como profesional.</p>
           
                  <a href="#portfolio" class="btn btn-black">Mira mis Proyectos</a> <a href="#contact" class="btn btn-default">Contactame</a>
                </div>
                
                <!-- Box - Skills & Attributes -->
                <div class="resume-box animated slide-in-left appear-second">
                  <i class="title-icon text-green flaticon-open79"></i>
                  <h3>Habilidades</h3>
                  <!-- Sinlge skill -->
                  <div class="skill">
                  	<span class="skill-name">PHP</span>
                    <div class="skill-bar sb-green">
                    	<div class="skill-rate-on"></div>
                        <div class="skill-rate-on"></div>
                        <div class="skill-rate-on"></div>
                        <div class="skill-rate-on"></div>
                    </div>
                  </div>
                  <!-- Sinlge skill -->
                  
                  <div class="skill">
                  	<span class="skill-name">Java</span>
                    <div class="skill-bar sb-green">
                    	<div class="skill-rate-on"></div>
                        <div class="skill-rate-on"></div>
                        <div class="skill-rate-on"></div>
                        <div class="skill-rate-off"></div>
                    </div>
                  </div>
                  <!-- Sinlge skill -->
                  <div class="skill">
                  	<span class="skill-name">.NET</span>
                    <div class="skill-bar sb-green">
                    	<div class="skill-rate-on"></div>
                        <div class="skill-rate-on"></div>
                        <div class="skill-rate-off"></div>
                        <div class="skill-rate-off"></div>
                    </div>
                  </div>
                  <!-- Sinlge skill -->
                  <div class="skill">
                  	<span class="skill-name">jQuery</span>
                    <div class="skill-bar sb-green">
                    	<div class="skill-rate-on"></div>
                        <div class="skill-rate-on"></div>
                        <div class="skill-rate-on"></div>
                        <div class="skill-rate-on"></div>
                    </div>
                  </div>
                  <div class="skill">
                  	<span class="skill-name">Photoshop</span>
                    <div class="skill-bar sb-green">
                    	<div class="skill-rate-on"></div>
                        <div class="skill-rate-off"></div>
                        <div class="skill-rate-off"></div>
                        <div class="skill-rate-off"></div>
                    </div>
                  </div>
                </div>
                
              </div>
          	  
              <div class="col-md-6 col-lg-4">
              
              	<!-- Box - Specialities -->
                <div class="resume-box animated slide-in-right">
                  <i class="title-icon text-red flaticon-mouse19"></i>
                  <h3>Mis Especialidades</h3>
                  <!-- Speciality -->
                  <div class="speciality">
                  	<i class="speciality-icon text-red flaticon-codings1"></i>
                    <div class="speciality-content">
                    	<h5 class="short">Symfony Framework</h5>
                        <p class="speciaity-description">El mas moderno, completo y avanzado framework MVC para desarrollo web con PHP.</p>
                    </div>
                  </div>
                  <!-- Speciality -->
                  <div class="speciality">
                  	<i class="speciality-icon text-red flaticon-bars6"></i>
                    <div class="speciality-content">
                    	<h5 class="short">Rich Internet Applications</h5>
                        <p class="speciaity-description">A traves de increibles diseños e interfaces de Usuario mediante JQuery, CSS3 y HTML5.</p>
                    </div>
                  </div>
                  <!-- Speciality -->
                  <div class="speciality">
                  	<i class="speciality-icon text-red flaticon-smart1"></i>
                    <div class="speciality-content">
                    	<h5 class="short">Responsive Designs</h5>
                        <p class="speciaity-description">Diseños compatibles con todo tipo de resoluciones, tamaños de pantalla, y variedad de dispositivos</p>
                    </div>
                  </div>
                </div>
                
                <!-- Box - Education & Jobs -->
                <div class="resume-box animated slide-in-left">
                  <i class="title-icon text-yellow flaticon-document56"></i>
                  <h3>Trayectoria Profesional</h3>
                  <div class="timeline">
                  	<!-- Single event -->
                  	<div class="timeline-event te-yellow">
                      <div class="event-date">Abril 2011 - Actualidad</div>
                      <div class="event-name">Java Web Developer</div>
                      <div class="event-description">Banco Macro Siemens It. Solutions and Bussiness UTE</div>
                    </div>
                    	<div class="timeline-event te-yellow">
                      <div class="event-date">Enero 2013 - Actualidad</div>
                      <div class="event-name">Symfony Web Developer - Consultant</div>
                      <div class="event-description">Netsecom - Information Technology Solutions</div>
                    </div>
                    
                    <!-- Single event -->
                    <div class="timeline-event te-yellow">
                      <div class="event-date">Julio 2013 - Actualidad</div>
                      <div class="event-name">Socio Gerente - Technical Leader</div>
                      <div class="event-description">Symfonica - Soluciones Informaticas</div>
                    </div>
                    <!-- Single event -->
                  	<div class="timeline-event te-yellow">
                      <div class="event-date">Enero 2014 - Actualidad</div>
                      <div class="event-name">Free Lancer</div>
                      <div class="event-description">Desarrollo y Diseño de Sistemas Web</div>
                    </div>
                    <!-- Single event -->
                  
                  </div>
                </div>
                
              </div>
              
              <div class="col-md-6 col-lg-4">
              
              	<!-- Box - Languages -->
                <div class="resume-box animated slide-in-right appear-second">
                  <i class="title-icon text-orange flaticon-chat25"></i>
                  <h3>Idioma Ingles</h3>
                  <!-- Single skill -->
                  <div class="skill">
                  	<span class="skill-name">Lectura</span>
                    <div class="skill-bar sb-orange">
                    	<div class="skill-rate-on"></div>
                        <div class="skill-rate-on"></div>
                        <div class="skill-rate-on"></div>
                        <div class="skill-rate-on"></div>
                    </div>
                  </div>
                  <div class="skill">
                  	<span class="skill-name">Escritura</span>
                    <div class="skill-bar sb-orange">
                    	<div class="skill-rate-on"></div>
                        <div class="skill-rate-on"></div>
                        <div class="skill-rate-on"></div>
                        <div class="skill-rate-on"></div>
                    </div>
                  </div>
                  <!-- Single skill -->
                  <div class="skill">
                  	<span class="skill-name">Habla</span>
                    <div class="skill-bar sb-orange">
                    	<div class="skill-rate-on"></div>
                        <div class="skill-rate-on"></div>
                        <div class="skill-rate-on"></div>
                        <div class="skill-rate-off"></div>
                    </div>
                  </div>
                </div>
                
                <!-- Box - Hobbies -->
                <div class="resume-box animated slide-in-bottom">
                  <i class="title-icon text-violet flaticon-joystick4"></i>
                  <h3>Hobbies e Intereses</h3>
                  <!-- List group -->
                  <ul class="list-group">
                    <li class="list-group-item">Deportes</li>
                    <li class="list-group-item">Musica</li>
                    <li class="list-group-item">Lectura</li>
                    <li class="list-group-item">Viajar</li>
                  </ul>
                </div>
                
              </div>
              
            </div>
            
        </div>
    
    </section>
    <!-- Resume / End -->
    
    <!-- Portfolio -->
    <section id="portfolio">
    
    	<!-- Projects Holder -->
    	<div class="projects-holder black dark clearfix">
            {% block projects %}{% endblock %}
        </div>
        
        <!-- Ajax Project Details -->
        <div class="project-content"></div>
        
    </section>
    <!-- Portfjolo / End -->
    
    <!-- Blog -->
    {# <section id="blog">
    
    	<div class="content padded">
        
          <div  class="row">
          
            <div class="col-lg-12">
                
              <!-- Post Carousel --> 
              <div class="post-carousel animated slide-in-top">
                <!-- Single Post -->
                <article class="post post-carousel-item">
                    <div class="post-image"><img src="{{ asset('template/images/blog/post_01.jpg') }}" alt="" /></div>
                    <div class="post-content-holder">
                        <div class="post-content">
                            <div class="post-info clearfix">
                                <span class="post-date">22 May, 2014</span>
                                <div class="post-meta">
                                    <span><i class="fa fa-comment"></i><a href="#">4 comments</a></span>
                                    <span><i class="fa fa-tag"></i><a href="#">Webdesign</a></span>
                                </div>
                            </div>
                            <div class="post-text">
                                <h3><a href="single-post.html">Awesome Seattle Cycle Trip</a></h3>
                                <p class="lead">Per sint eirmod expetenda te. Pro ne essent.</p>
                                <p>Per ea tibique fabellas electram. Ea aliquam corpora vis. Ne quot civibus atomorum quo. </p>
                                <a href="single-post.html" class="btn btn-primary btn-sm">Read more</a>
                            </div>
                        </div>
                    </div>
                </article>
                <!-- Single Post -->
                <article class="post post-carousel-item">
                    <div class="post-image"><img src="{{ asset('template/images/blog/post_02.jpg') }}" alt="" /></div>
                    <div class="post-content-holder">
                        <div class="post-content">
                            <div class="post-info clearfix">
                                <span class="post-date">22 May, 2014</span>
                                <div class="post-meta">
                                    <span><i class="fa fa-comment"></i><a href="#">4 comments</a></span>
                                    <span><i class="fa fa-tag"></i><a href="#">Webdesign</a></span>
                                </div>
                            </div>
                            <div class="post-text">
                                <h3><a href="single-post.html">Brand New PC</a></h3>
                                <p class="lead">Per sint eirmod expetenda te. Pro ne essent.</p>
                                <p>Per ea tibique fabellas electram. Ea aliquam corpora vis. Ne quot civibus atomorum quo. </p>
                                <a href="single-post.html" class="btn btn-primary btn-sm">Read more</a>
                            </div>
                        </div>
                    </div>
                </article>
                <!-- Single Post -->
                <article class="post post-carousel-item">
                    <div class="post-image"><img src="{{ asset('template/images/blog/post_03.jpg') }}" alt="" /></div>
                    <div class="post-content-holder">
                        <div class="post-content">
                            <div class="post-info clearfix">
                                <span class="post-date">22 May, 2014</span>
                                <div class="post-meta">
                                    <span><i class="fa fa-comment"></i><a href="#">4 comments</a></span>
                                    <span><i class="fa fa-tag"></i><a href="#">Webdesign</a></span>
                                </div>
                            </div>
                            <div class="post-text">
                                <h3><a href="single-post.html">To be or not to be?</a></h3>
                                <p class="lead">Per sint eirmod expetenda te. Pro ne essent.</p>
                                <p>Per ea tibique fabellas electram. Ea aliquam corpora vis. Ne quot civibus atomorum quo. </p>
                                <a href="single-post.html" class="btn btn-primary btn-sm">Read more</a>
                            </div>
                        </div>
                    </div>
                </article>
                <!-- Single Post -->
                <article class="post post-carousel-item">
                    <div class="post-image"><img src="{{ asset('template/images/blog/post_04.jpg') }}" alt="" /></div>
                    <div class="post-content-holder">
                        <div class="post-content">
                            <div class="post-info clearfix">
                                <span class="post-date">22 May, 2014</span>
                                <div class="post-meta">
                                    <span><i class="fa fa-comment"></i><a href="#">4 comments</a></span>
                                    <span><i class="fa fa-tag"></i><a href="#">Webdesign</a></span>
                                </div>
                            </div>
                            <div class="post-text">
                                <h3><a href="single-post.html">New Software for my company</a></h3>
                                <p class="lead">Per sint eirmod expetenda te. Pro ne essent.</p>
                                <p>Per ea tibique fabellas electram. Ea aliquam corpora vis. Ne quot civibus atomorum quo. </p>
                                <a href="single-post.html" class="btn btn-primary btn-sm">Read more</a>
                            </div>
                        </div>
                    </div>
                </article>
                <!-- Single Post -->
                <article class="post post-carousel-item">
                    <div class="post-image"><img src="{{ asset('template/images/blog/post_05.jpg') }}" alt="" /></div>
                    <div class="post-content-holder">
                        <div class="post-content">
                            <div class="post-info clearfix">
                                <span class="post-date">22 May, 2014</span>
                                <div class="post-meta">
                                    <span><i class="fa fa-comment"></i><a href="#">4 comments</a></span>
                                    <span><i class="fa fa-tag"></i><a href="#">Webdesign</a></span>
                                </div>
                            </div>
                            <div class="post-text">
                                <h3><a href="single-post.html">Awesome Seattle Cycle Trip</a></h3>
                                <p class="lead">Per sint eirmod expetenda te. Pro ne essent.</p>
                                <p>Per ea tibique fabellas electram. Ea aliquam corpora vis. Ne quot civibus atomorum quo. </p>
                                <a href="single-post.html" class="btn btn-primary btn-sm">Read more</a>
                            </div>
                        </div>
                    </div>
                </article>
                <!-- Single Post -->
                <article class="post post-carousel-item">
                    <div class="post-image"><img src="{{ asset('template/images/blog/post_06.jpg') }}" alt="" /></div>
                    <div class="post-content-holder">
                        <div class="post-content">
                            <div class="post-info clearfix">
                                <span class="post-date">22 May, 2014</span>
                                <div class="post-meta">
                                    <span><i class="fa fa-comment"></i><a href="#">4 comments</a></span>
                                    <span><i class="fa fa-tag"></i><a href="#">Webdesign</a></span>
                                </div>
                            </div>
                            <div class="post-text">
                                <h3><a href="single-post.html">Brand new PC</a></h3>
                                <p class="lead">Per sint eirmod expetenda te. Pro ne essent.</p>
                                <p>Per ea tibique fabellas electram. Ea aliquam corpora vis. Ne quot civibus atomorum quo. </p>
                                <a href="single-post.html" class="btn btn-primary btn-sm">Read more</a>
                            </div>
                        </div>
                    </div>
                </article>
                <!-- Single Post -->
                <article class="post post-carousel-item">
                    <div class="post-image"><img src="{{ asset('template/images/blog/post_07.jpg') }}" alt="" /></div>
                    <div class="post-content-holder">
                        <div class="post-content">
                            <div class="post-info clearfix">
                                <span class="post-date">22 May, 2014</span>
                                <div class="post-meta">
                                    <span><i class="fa fa-comment"></i><a href="#">4 comments</a></span>
                                    <span><i class="fa fa-tag"></i><a href="#">Webdesign</a></span>
                                </div>
                            </div>
                            <div class="post-text">
                                <h3><a href="single-post.html">To be or not to be?</a></h3>
                                <p class="lead">Per sint eirmod expetenda te. Pro ne essent.</p>
                                <p>Per ea tibique fabellas electram. Ea aliquam corpora vis. Ne quot civibus atomorum quo. </p>
                                <a href="single-post.html" class="btn btn-primary btn-sm">Read more</a>
                            </div>
                        </div>
                    </div>
                </article>
              </div> 
               
              <!-- End Of Section -->
              <div class="end-of-section">
          
                <!-- Left Caption -->
                <div class="pull-left">
                  <span class="hiddend-sm hidden-xs">Would you like to check all of my posts? &nbsp; &nbsp;</span><a href="blog-page.html" class="btn btn-black btn-sm">Check my Blog Page!</a>
                </div>
                 
                <!-- Post Carousel Navigation -->  
                <div class="post-carousel-control">
                  <a class="post-carousel-prev" href="#">Previous</a>
                  <a class="post-carousel-next" href="#">Next</a>
                </div>
              
              </div>
                
            </div>
          
          </div>
            
        </div>
        
    </section> #}
    <!-- Blog / End -->
    
    <!-- Contact -->
    <section id="contact" class="black">
    
    	<!-- Google Map -->
    	<div id="google-map" class="animated zoom-out"></div>
        
        <!-- Contact Content -->
        <div class="content contact-content padded dark animated slide-in-left">
        	<i class="title-icon text-primary flaticon-speech43"></i>
        	<h2>¿Le gustaria contratarme?</h2>
            <!-- Contact List -->
            <ul class="list-unstyled list-unstyled-icons">
              <li><i class="inline-icon icon-before-and-after text-primary fa fa-map-marker"></i>12 de Octubre 566 Dpto 13,<br />Salta - Capital,<br />CP 4400 - Argentina</li>
              <li><i class="inline-icon icon-before-and-after text-primary fa fa-comment"></i><a href="mailto:contacto@ezequielzacca.com.ar">contacto@ezequielzacca.com.ar</a></li>
              <li><i class="inline-icon icon-before-and-after text-primary fa fa-phone"></i>+54(387)5 339353</li>
            </ul>
            <br/><br/>
            <!--<p><a href="#" class="btn btn-primary">Download my CV</a></p>-->
            <!-- Bottom Bar -->
            <div class="bottom-bar contact-bottom-bar">
            	<div class="row">
                	<div class="col-md-12 col-lg-6">
                    	<h5>Redes Sociales!</h5>
                        <!-- Social Icons -->
                        <ul class="social-icons medium">
                        	<li><a href="https://www.facebook.com/ezequiel.zacca.w" target="_blank"><i class="fa fa-facebook"></i></a></li>
                            <li><a href="https://www.linkedin.com/pub/matias-ezequiel-zacca-romano/64/27a/3a5" target="_blank"><i class="fa fa-linkedin"></i></a></li>
                            <li><a href="https://plus.google.com/+EzequielZacca" target="_blank"><i class="fa fa-google-plus"></i></a></li>
                        </ul>
                    </div>
                    <div class="col-md-12 col-lg-6">
                    	<h5>Me Gusta! en Facebook</h5>
                        <!-- Like Button -->
                        <div class="fb-like" data-href="https://www.facebook.com/ezequiel.zacca.w" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Contact Form -->
       	<div id="contact-form-holder" class="dark">
          <div class="contact-form-trigger animated slide-in-right appear-second"><i class="flaticon-mail21"></i></div>
          <div id="enviando" class="alert alert-info" style="display:none;"><strong>Enviando...</strong> Por favor espere un momento!</div>
          <form role="form" id="contact-form" method="post">
            <div class="form-group">
              <label>Nombre:</label>
              <input type="text" class="form-control" id="from"  name="from" placeholder="Ingresa tu Nombre">
            </div>
            <div class="form-group">
              <label>Email:</label>
              <input type="email" class="form-control" id="email"  name="email" placeholder="Ingresa tu Email">
            </div>
              <div class="form-group">
              <label>Asunto:</label>
              <input type="text" class="form-control" id="subject"  name="subject" placeholder="Ingresa el Asunto">
            </div>
            <div class="form-group">
              <label>Mensaje:</label>
              <textarea class="form-control" id="body" name="body" rows="3"></textarea>
            </div>
            <button id="botonEnvia" type="submit" class="btn btn-default">Enviar! <i class="icon-after fa fa-chevron-right"></i></button>
          </form>
        </div>
        
    </section>
    <!-- Contact / End -->
	
</div>
<!-- Page Content / End -->

<!-- Scripts -->
<script type="text/javascript" src="{{ asset('template/js/jquery-1.10.2.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('template/js/page-loader.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('template/js/bootstrap.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('template/js/jquery.easing.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('template/js/jquery.validate.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('template/js/jquery.localscroll-1.2.7-min.js') }}"></script>
<script type="text/javascript" src="{{ asset('template/js/jquery.scrollTo-1.4.3.1-min.js') }}"></script>
<script type="text/javascript" src="{{ asset('template/js/jquery.fitvids.js') }}"></script>
<script type="text/javascript" src="{{ asset('template/js/jquery.appear.js') }}"></script>
<script type="text/javascript" src="{{ asset('template/js/waypoints.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('template/js/jquery.mb.YTPlayer.js') }}"></script>
<script type="text/javascript" src="{{ asset('template/js/owl.carousel.min.js') }}"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

<!-- Custom Script -->
<script type="text/javascript" src="{{ asset('template/js/custom.js') }}"></script>
<script type="text/javascript" >
$(document).ready(function (){
        	/* Contact Form
	-----------------------------------------------------*/
	
	var $contactForm  = $('#contact-form');

    $contactForm.validate({
        rules: {
            from: {
                required    : true                
            },
            email: {
                required    : true,
                email       : true
            },
            body: {
                required    : true                
            },
            subject: {
                required    : true                
            }
        },
        messages: {
            from: {
                required    : "Ingrese su nombre."
            },
            email: {
                required    : "Ingrese su email.",
                email       : "Ingrese un email valido."
            },
            subject: {
                required    : "Ingrese el asunto."
            },
            body: {
                required    : "Ingrese el mensaje."
            }
        }
    });

    // Send the email
    $contactForm.submit(function(){
        var $success      = '<strong>Gracias!</strong> Tu mensaje fue enviado, me estare comunicando a la brevedad.';
	    var $error      = '<strong>Lo Sentimos!</strong> En este momento no pudimos enviar tu mensaje, intenta luego...';
      	var response;
        
        if ($contactForm.valid()){
            $('#botonEnvia,#enviando').slideToggle();
            $.ajax({
                type: "POST",
                url: "{{ path('contacto') }}",
                data: $(this).serialize(),
                success: function(msg) {
                    $('#enviando').slideToggle();
                    if (msg === 'SEND') {
                        response = '<div class="alert alert-success">'+ $success +'</div>';
                    }
                    else {
                        response = '<div class="alert alert-warning">'+ $error +'</div>';
                    }
                    $(".alert-error,.alert-success").remove();
                    $contactForm.prepend(response);
                }
             });
            return false;
        }
        return false;
    });

        
	/* Google Map
	-----------------------------------------------------*/
	
	function mapInitialize() {
		
	var mapDark =  [
				  {
					  "stylers": [
						  {
							  "hue": "#ff1a00"
						  },
						  {
							  "invert_lightness": true
						  },
						  {
							  "saturation": -100
						  },
						  {
							  "lightness": 33
						  },
						  {
							  "gamma": 0.5
						  }
					  ]
				  },
				  {
					  "featureType": "water",
					  "elementType": "geometry",
					  "stylers": [
						  {
							  "color": "#2D333C"
						  }
					  ]
				  }
			  ];
			  
	  var mapLight =  [
				  {
					  "featureType": "landscape",
					  "elementType": "labels",
					  "stylers": [
						  {
							  "visibility": "off"
						  }
					  ]
				  },
				  {
					  "featureType": "transit",
					  "elementType": "labels",
					  "stylers": [
						  {
							  "visibility": "off"
						  }
					  ]
				  },
				  {
					  "featureType": "poi",
					  "elementType": "labels",
					  "stylers": [
						  {
							  "visibility": "off"
						  }
					  ]
				  },
				  {
					  "featureType": "water",
					  "elementType": "labels",
					  "stylers": [
						  {
							  "visibility": "off"
						  }
					  ]
				  },
				  {
					  "featureType": "road",
					  "elementType": "labels.icon",
					  "stylers": [
						  {
							  "visibility": "off"
						  }
					  ]
				  },
				  {
					  "stylers": [
						  {
							  "hue": "#00aaff"
						  },
						  {
							  "saturation": -100
						  },
						  {
							  "gamma": 2.15
						  },
						  {
							  "lightness": 12
						  }
					  ]
				  },
				  {
					  "featureType": "road",
					  "elementType": "labels.text.fill",
					  "stylers": [
						  {
							  "visibility": "on"
						  },
						  {
							  "lightness": 24
						  }
					  ]
				  },
				  {
					  "featureType": "road",
					  "elementType": "geometry",
					  "stylers": [
						  {
							  "lightness": 57
						  }
					  ]
				  }
			  ]
	//-24.774904,-65.408849			  
	  /*var yourLatitude = 40.758895;
	  var yourLongitude = -73.985131;*/
	  var yourLatitude = -24.774904;
	  var yourLongitude = -65.408849;
	  
	  var myOptions = {
		zoom: 14,
		center: new google.maps.LatLng(yourLatitude,yourLongitude-0.01),
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		mapTypeControl: false,
		panControl: false,
		zoomControl: false,
		scaleControl: false,
		streetViewControl: false,
		styles: mapDark
	  };
	  
	  var map = new google.maps.Map(document.getElementById('google-map'), myOptions);
	  
	  var image = '{{ asset('template/images/my-location.png') }}';
	  var myLatLng = new google.maps.LatLng(yourLatitude,yourLongitude);
	  var myLocation = new google.maps.Marker({
		  position: myLatLng,
		  map: map,
		  icon: image
	  });
	
	}
	
	google.maps.event.addDomListener(window, 'load', mapInitialize);
	
});
</script>
<script>
/* Video Background */
$("#profile-bg").hide();
$(".player").mb_YTPlayer();
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
	$("#wrapper_mbYTP_profile-bg-player").hide();
	$("#profile-bg").show();
} 
</script>


</body>

</html>

